<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/rollcall.css">
</head>

<body>
    <script src="./js/名单.js"></script>
    <script>
        cat = cat.split(/[\r \n]+/);
        var temp = [];
        while (cat.length) temp.push([...cat.splice(Math.floor(Math.random() * (cat.length - 1)), 1)]);
        cat = temp;
        function RollCall(parent, cat, width) {
            this.parent = parent;
            this.node = null;
            this.cat = cat;
            this.items = [];
            this.index = -1;
            this.jump = 0;
            this.intercept = false;
            this.ssr = [];
            width > 400 ? this.width = width : this.width = 400;
        }
        RollCall.prototype.getParent = function () {
            return this.parent;
        }
        RollCall.prototype.getItemWidth = function () {
            var item = getComputedStyle(this.items[0], null);
            return parseInt(item.width) + parseInt(item.paddingLeft) + parseInt(item.paddingRight) + parseInt(item.marginLeft) + parseInt(item.marginRight);
        }
        RollCall.prototype.init = function () {
            if (!this.parent || !this.cat.length) return;
            this.node = document.createElement("div");
            this.node.classList.add("box");
            this.node.style.width = this.width + "px";
            for (var i = 0; i < this.cat.length; i++) {
                var item = document.createElement("div");
                item.classList.add("item");
                item.textContent = this.cat[i];
                item.onclick = function () {
                    alert(`"${this.textContent}"卡牌爆率UP5倍`);
                    alert("但我没写");
                    console.log(this);
                }
                this.node.appendChild(item);
                this.items.push(item);
            }
            var more = this.cat.length % (Math.floor(this.width / 62));
            while (more-- > 0) {
                var item = document.createElement("div");
                item.className = "item transparent";
                this.node.appendChild(item);
            }
            var draw = document.createElement("div");
            draw.classList.add("draw");
            draw.textContent = "抽卡";
            var self = this;
            draw.onclick = function () {
                if (self.intercept) return;
                self.intercept = true;
                function createInterval(time) {
                    if (self.jump >= 10) {
                        self.jump = 0;
                        var callName = document.createElement("div");
                        callName.classList.add("item");
                        callName.classList.add("SSRItem");
                        callName.textContent = self.items[self.index].textContent;
                        callName.style.backgroundImage = `url(./images/001.webp)`;
                        setTimeout(function () {
                            self.node.appendChild(callName);
                            self.intercept = false;
                            self.ssr.push(self.index);
                        }, 1000);
                        return;
                    }
                    setTimeout(function () {
                        var index = Math.floor(Math.random() * (self.cat.length - 1));
                        while (self.ssr.indexOf(index) != -1) {
                            index = Math.floor(Math.random() * (self.cat.length - 1));
                        }
                        if (self.index != -1) self.items[self.index].classList.remove("active");
                        self.items[index].classList.add("active");
                        self.index = index;
                        self.jump++;
                        time += self.jump * 50;
                        createInterval(time);
                    }, time)
                }
                createInterval(0);
            }
            this.node.appendChild(draw);
            this.parent.appendChild(this.node);
        }
        var rallCall = new RollCall(document.body, cat, 800);
        rallCall.init();
    </script>
</body>

</html>